<template>
  <div class="pages addCard">
    <div class="pageLevel">
      <!-- 头部 -->
      <div class="content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item>
            <el-button @click="goBack()">返回</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" style="margin-left: 30px;"> 提交</el-button>
          </el-form-item>
          <el-form-item label="开户名称" prop="name">
            <div>{{ruleForm.name}}</div>
          </el-form-item>
          <el-form-item label="银行卡号" prop="bankcard">
            <el-input v-model="ruleForm.bankcard" maxlength="20" placeholder="请输入" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="bank">
            <el-select size="small" style="width:200px" filterable v-model="ruleForm.bank" placeholder="请先选择银行在填网点" @change="dropdown">
              <el-option v-for="item in options" :key="item.index" :label="item.bankName" :value="item.bkId"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开户网点" prop="dot" class="Site">
            <!-- <el-autocomplete class="inline-input" :disabled="opening" v-model="ruleForm.dot" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete> -->
            <el-select remote reserve-keyword :remote-method="remoteMethod" class="dots" v-model="ruleForm.dot" filterable placeholder="请选择" :disabled="opening">
              <el-option v-for="item in restaurants" :key="item.value" :label="item.openbknm" :value="item.openbkcd"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="left-phone" label="银行预留手机号" prop="phone">
            <el-input v-model="ruleForm.phone" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="11" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="短信验证码" prop="verificationCode">
            <el-row>
              <el-col :span="12">
                <el-input placeholder="验证码" size="small" maxlength="6" v-model="ruleForm.verificationCode" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></el-input>
              </el-col>
              <el-col :span="12">
                <div class="clickCode">
                  <el-button style="font-size:14px;margin-left: 50px;" v-if="codeMsg!='获取验证码'">{{countdowns+codeMsg}}</el-button>
                  <el-button @click="getCode('ruleForm')" style=" font-size:14px;margin-left:50px;" v-if="codeMsg=='获取验证码'">{{countdowns+codeMsg}}</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <!-- </el-form-item> -->
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import {
  sendPhoneCode,
  quickPayment,
  quickPaymentSMS,
  getSupportBanks,
  getAccountInfo,
  getPaymentBanks
} from "@/api";
export default {
  computed: {
    ...mapState({
      merchantId: state => state.merchantId
    })
  },
  data() {
    const validMobilePhone = (rule, value, callback) => {
      if (!util.validMobilePhone(value)) {
        return callback(new Error("手机号格式不正确 "));
      } else {
        callback();
      }
    };
    return {
      searchInfo: "",
      restaurants: [],
      options: [],
      opening: true,
      trading: "",
      codeDisabled: false, // 是否禁用按钮
      countdown: 120, //120秒
      countdowns: "", //验证码秒数
      timer: null, // 定时器
      codeMsg: "获取验证码", //按钮上的文字
      showTab: "",
      ruleForm: {
        name: "圣旦",
        bank: "",
        Dot: "",
        phone: "",
        verificationCode: "",
        bankcard: ""
      },
      rules: {
        name: [{ required: true, message: "请输入开户名称", trigger: "blur" }],
        bankcard: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
          { min: 4, max: 20, message: "银行卡号格式错误", trigger: "blur" }
        ],
        bank: [{ required: true, message: "请输入开户银行", trigger: "blur" }],
        dot: [{ required: true, message: "请输入开户网点", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { max: 11, message: "长度在11个字符", trigger: "blur" },
          { validator: validMobilePhone, trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getSupportBanks(); //银行下拉
    this.getAccountInfo(); //账号信息
  },
  methods: {
    remoteMethod(query) {
      console.log(query);
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.searchInfo = query;
          this.getPaymentBanks(this.ruleForm.bank);
        }, 200);
      } else {
      }
    },
    getSupportBanks() {
      //银行下拉
      let data = {
        orgId: this.merchantId
      };
      getSupportBanks(data).then(res => {
        //默认当前仓库
        this.options = res.data.list;
      });
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    dropdown(val) {
      this.opening = false;
      this.Information = val;
      this.getPaymentBanks();
    },
    getPaymentBanks() {
      let data = {
        searchInfo: this.searchInfo,
        orgId: this.merchantId,
        bkId: this.Information
      };
      getPaymentBanks(data).then(res => {
        //默认网点
        this.loadAll = res.data.list;
        for (var i = 0; i < this.loadAll.length; i++) {
          this.loadAll[i].value = this.loadAll[i].openbknm;
          this.loadAll[i].address = this.loadAll[i].openbkcd;
        }
        this.restaurants = this.loadAll;
      });
    },
    handleSelect(item) {
      // console.log(item);
    },
    getAccountInfo() {
      let data = {
        orgId: this.merchantId
      };
      getAccountInfo(data).then(res => {
        this.ruleForm.name = res.data.accountName;
      });
    },
    quickPaymentSMS() {
      if (
        this.ruleForm.verificationCode == "" ||
        this.ruleForm.verificationCode == "123456"
      ) {
        //this.ruleForm.verificationCode == "123456"
        this.$message({
          message: "验证码格式不正确",
          center: true,
          duration: "1000"
        });
        return false;
      }
      let data = {
        orgId: this.merchantId,
        bkaccAccno: this.ruleForm.bankcard,
        qpySmsmsg: this.ruleForm.verificationCode,
        bkaccPhone: this.ruleForm.phone
      };
      quickPaymentSMS(data)
        .then(res => {
          this.$message({
            message: res.data.qpyOpion,
            center: true,
            duration: "1000"
          });

          if (res.data.qpyState == 3) {
            this.$store.commit("SETISRELOADDATA", true);
            util.routerTo("/financial-center/account-center/finance-account");
          } else {
            let number = 3 - parseInt(res.data.number);
            this.$alert(
              res.data.qpyOpion +
                ", 您还有" +
                number +
                "次输入机会，若3次错误后，则当日无法继续进行绑卡",
              {
                confirmButtonText: "确定",
                center: true,
                showClose: false,
                callback: action => {}
              }
            );
          }
        })
        .catch(error => {
          this.$confirm(res.qpyOpion, "提示", {
            type: "warning",
            showCancelButton: false,
            showConfirmButton: false,
            closeOnClickModal: false,
            closeOnPressEscape: false
          });
        });
    },
    quickPayment() {
      let data = {
        orgId: this.merchantId,
        bkaccAccno: this.ruleForm.bankcard,
        bkaccPhone: this.ruleForm.phone,
        flag: 1
      };
      quickPayment(data).then(res => {});
    },
    goBack() {
      history.back();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.quickPaymentSMS();
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    checkMobile(s) {
      var length = s.length;
      if (length == 11 && /^1[3|4|5|7|8][0-9]\d{4,8}$/.test(s)) {
        return true;
      } else {
        return false;
      }
    },
    // 获取验证码
    getCode(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (
            this.ruleForm.phone !== "" &&
            this.checkMobile(this.ruleForm.phone)
          ) {
            let Data = {
              orgId: this.merchantId,
              bkaccAccno: this.ruleForm.bankcard,
              bkaccPhone: this.ruleForm.phone,
              flag: 1
            };
            quickPayment(Data).then(res => {
              if (res.code == "200") {
                this.$message({
                  message: "已发送短信",
                  center: true,
                  duration: "1000"
                });
                this.trading = res.data.bizSerialNumber;
                // 验证码120秒倒计时
                if (!this.timer) {
                  this.timer = setInterval(() => {
                    if (this.countdown > 0 && this.countdown <= 120) {
                      this.countdown--;
                      if (this.countdown !== 0) {
                        this.codeMsg = "" + "重新获取";
                        this.countdowns = this.countdown + "S";
                      } else {
                        clearInterval(this.timer);
                        this.codeMsg = "获取验证码";
                        this.countdowns = "";
                        this.countdown = 120;
                        this.timer = null;
                        this.codeDisabled = false;
                      }
                    }
                  }, 1000);
                }
              } else {
                this.$message({
                  message: res.data.msg,
                  center: true,
                  duration: "3000"
                });
              }
            });
            console.log(this.codeMsg);
          } else {
            this.$message({
              message: "请输入正确的手机号",
              duration: "3000"
            });
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.addCard .content {
  width: 500px;
  margin-top: 30px;
  margin-left: 50px;
}
.addCard .content .span2 {
  position: absolute;
  left: 412px;
  top: 0px;
  color: #c0c4cc;
  width: 252px;
}
</style>
<style>
.addCard .left-phone .el-form-item__label {
  width: 175px !important;
  margin-left: -77px !important;
}
.addCard .Site .el-autocomplete {
  display: block !important;
}
.addCard .dots {
  width: 400px;
}
.addCard .dots .el-input__suffix {
  display: none;
}
</style>

